<script setup>
import {onMounted } from 'vue'
//1.导入js模块
import{useAddDataMember, useGetListMember,useDelDataMember}from'./smallBackTools.js'
//2.调用函数
const {list,getList,totalPrice} = useGetListMember()
//新增数据
const{formData,addData} = useAddDataMember()
//删除数据
const {delData} = useDelDataMember()
onMounted(()=>{
  getList()
})
</script>

<template>
  <div id="app">
    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">

        <!-- 添加资产 -->
        <form class="my-form">
          <input type="text" v-model="formData.name" class="form-control" placeholder="消费名称" />
          <input type="text" v-model="formData.price" class="form-control" placeholder="消费价格" />
          <button type="button" class="btn btn-primary" @click="addData">添加账单</button>
        </form>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>
              <th>消费名称</th>
              <th>消费价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <td :class="{red:item.price>500}">{{ item.price }}</td>
              <td><a href="javascript:;" @click="delData(item.id)">删除</a></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计：{{totalPrice.toFixed(2)}}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- 右侧图表 -->
      <!-- <div class="echarts-box" id="main"></div> -->
    </div>
  </div>
</template>

<style scoped>
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css);

.red {
  color: red !important;
}

.search {
  width: 300px;
  margin: 20px 0;
}

.my-form {
  display: flex;
  margin: 20px 0;
}

.my-form input {
  flex: 1;
  margin-right: 20px;
}

.table> :not(:first-child) {
  border-top: none;
}

.contain {
  display: flex;
  padding: 10px;
}

.list-box {
  flex: 1;
  padding: 0 30px;
}

.list-box a {
  text-decoration: none;
}

.echarts-box {
  width: 600px;
  height: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

tfoot {
  font-weight: bold;
}

@media screen and (max-width: 1000px) {
  .contain {
    flex-wrap: wrap;
  }

  .list-box {
    width: 100%;
  }

  .echarts-box {
    margin-top: 30px;
  }
}
</style>